<template>
	<el-dialog title="新建会员账户" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1000px">
		<div class="form-box">
			<el-form ref="form" class="header-area" :model="form" :rules="rules" label-width="110px" style="height: auto;">
				<el-row>
					<el-col :span="10">
						<el-form-item label="会员手机号" prop="phone">
							<el-input v-model="form.phone" size="small" placeholder="请输入手机号" clearable></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="4">
						<el-form-item label-width="30px">
							<el-button type="primary" size="small" @click="searchUser">搜索</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			
			<template v-if="userId">
				<div class="form-title">会员信息</div>
				<el-form label-width="90px">
					<el-row>
						<el-col>
							<el-form-item label="会员头像">
								<el-image :src="userInfo.headImg" style="width: 80px; height: 80px">
									<div slot="error" class="image-slot">
										<i class="el-icon-picture-outline"></i>
									</div>
								</el-image>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="用户名">
								<el-input v-model="userInfo.userName" readonly></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="会员昵称">
								<el-input v-model="userInfo.nickName" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="12">
							<el-form-item label="手机号">
								<el-input v-model="userInfo.phone" readonly></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="注册时间">
								<el-input :value="forDate(userInfo.createTime)" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</template>
		</div>
		
		<div slot="footer">
			<el-button type="primary" @click="submit">新建会员账户</el-button>
			<!-- <el-button @click="reset" v-if="!isEdit">重 置</el-button> -->
			<el-button @click="close">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { findUserListByPage } from '@api/martUser/user'
	import { addMemberAccount } from '@api/shopCashierChangeShift/shopCashierChangeShift'
	import dayjs from 'dayjs'
	export default {
		props: {
			isShow: Boolean,
		},
		data() {
			let validatePhone = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入手机号'));
				} else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))) {
					callback(new Error('请检查手机号是否正确'));
				} else if (value.length < 11) {
					callback(new Error('请输入完整的11位手机号'));
				} else {
					callback();
				}
			}
			return {
				form: {
					phone: '',
				},
				rules: {
					phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
				},
				
				userId: '',
				userInfo: '',
			}
		},
		methods: {
			searchUser() { //搜索会员
				this.$refs.form.validate(valid => {
					if(valid) {
						findUserListByPage({
							phone: this.form.phone
						})
							.then(res => {
								if(res.data.content.length) {
									this.userId = res.data.content[0].id;
									this.userInfo = res.data.content[0];
								} else {
									this.$message.error('查找不到会员！请重新搜索。');
								}
							})
					}
				})
				
			},
			forDate(val) {
				return val == null ? '-' : dayjs(val).format('YYYY-MM-DD HH:mm:ss');
			},
			
			submit() { //提交添加
				if(!this.userId) {
					this.$message('请搜索会员并选择会员账号！');
					return;
				}
				addMemberAccount({userId: this.userId})
					.then(() => {
						this.$message.success('会员账户添加成功！');
						
						this.$emit('submit');
						this.close();
					})
			},
			reset() {
				this.$refs.form.resetFields();
				this.userId = '';
				this.userInfo = '';
			},
			
			close() {
				this.$emit('close');
				this.reset();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-title {
		font-size: 16px;
		font-weight: bold;
		padding: 30px 0 30px 25px;
	}
	
	::v-deep .image-slot {
		width: 80px;
		height: 80px;
		background: #f3f3f3;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>